<script setup>
//行为
import { provide } from 'vue'
import { onMounted,ref } from "vue";
import SonCom from "./components/SonCom.vue";

//Vue3组合式api中没有了this。需要创建ref来获取DOM节点
const h1Ref = ref(null)

//组件挂载完毕后。获取DOM节点
onMounted(()=>{
  console.log(h1Ref.value)
})

const getDOM = () => {
  console.log(h1Ref.value)
}

const message = ref("Hello Vue3")
const sonComRef = ref(null)
const getSonCom = () => {
 sonComRef.value.validate()
}

// ------------------------------------------
//----------------------------
provide('myMsg',message)
provide('myStr','hahahaha')
provide('setMyMsg',()=>{
  message.value +='💵'
})


</script>

<template>
<!--结构 -->
<!-- 给组件添加ref属性，用于获取DOM节点 -->
<h1 ref="h1Ref">Hello Vue3</h1>
<button @click="getDOM">点击</button>
<SonCom :msg="message" ref="sonComRef"/>
<button @click="getSonCom">获取组件实例</button>
<button @click="message += '!'">修改数据</button>

</template>

<style scoped>
/*样式*/
</style>
